<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息</title>
    <link href="${applicationScope.basePath}/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/index.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/userhome.css">
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<div class="container" style="margin-top: 80px;">
    <!--
        描述：左侧个人中心栏
    -->
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-12">
                    <div class="thumbnail">
                        <img src="${applicationScope.basePath}/images/header.jpg" alt="" class=""
                             style="border-radius: 50%;width: 140px;height: 140px;">
                        <div class="caption">
                            <h3 style="text-align: center;">${requestScope.user.userName}</h3>
                        </div>
                        <hr>
                        <a id="myWallet" class="btn btn btn-warning btn-block"
                           href="${applicationScope.basePath}/user/space/purse">我的钱包：${requestScope.purse.balance}元</a>
                        <span disabled="true" class="btn btn-warning btn-block" data-toggle="modal"
                              data-target="#myModal"
                              style="margin-top: 15px;">我的信用积分：${requestScope.user.power}</span>
                    </div>
                </div>
            </div>
            <div class="list-group ">
                <a id="orders" href="${applicationScope.basePath}/user/space/orders" class="list-group-item list-group-item-info ">订单中心</a>
                <a id="notice_list" href="${applicationScope.basePath}/user/space"
                   class="list-group-item list-group-item-info">求购中心<span
                        class="badge">${requestScope.num}</span></a>
                <a id="system_msg" href="${applicationScope.basePath}/user/space/sys" class="list-group-item list-group-item-info">系统信息<span
                        class="badge">${requestScope.sys}</span></a>
                <a id="goods_list" href="${applicationScope.basePath}/user/space/goods" class="list-group-item list-group-item-info">我的商品</a>
                <a id="person_msg" href="${applicationScope.basePath}/user/space/msg"
                   class="list-group-item list-group-item-info">个人设置</a>
            </div>
        </div>
        <!--
            描述：右侧个人内容栏
        -->
        <div class="col-md-10">
            <div id="content1">
                <h4>个人信息</h4>
                <hr/>
                <form id="account_msg" action="${applicationScope.basePath}/user/space/msg" class="form-horizontal"
                      method="post" enctype="multipart/form-data" style="margin:0 auto;width: 50%;">
                    <div class="form-group">
                        <label for="usernameID" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" id="usernameID" name="=userName" required="required"
                                   value="${requestScope.user.userName}" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <c:if test="${requestScope.user.sex == 1}">
                                <input type="radio" name="sex" value="1" checked>男
                                <input type="radio" name="sex" value="0">女
                            </c:if>
                            <c:if test="${requestScope.user.sex == 0}">
                                <input type="radio" name="sex" value="1">男
                                <input type="radio" name="sex" value="0" checked>女
                            </c:if>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" id="phoneID" required="required" value="${requestScope.user.phone}"
                                   name="phone" class="form-control" id="phone" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" value="${requestScope.user.email}" required="required" name="email"
                                   class="form-control" id="email" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 pull-right">
                            <button type="submit" class="btn btn-primary" id="sub_input" value="">保存修改信息
                                <button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="${applicationScope.basePath}/js/jquery.form.min.js"></script>
<script>
    $(function () {
        let options = {
            beforeSubmit: function () {
                // 检查昵称和电话
                if(check_phone() && check_username()){
                    $('#sub_input').button("loading");
                    return true;
                }else{
                    return false;
                }
            },
            success: function (data) {
                $('#sub_input').button("reset");
                if (data['flag']) {
                    alert("修改成功！");
                } else {
                    alert("修改失败，请稍后重试！")
                }
            }
        };
        $("#account_msg").ajaxForm(options);
    });

    //校验手机号码
    function check_phone() {
        let val = $("#phoneID").val();
        let reg_phone = /^1[3|4|5|8][0-9]\d{4,8}$/;
        let flag = reg_phone.test(val);
        if (flag) {
            $("#phoneID").css("border", "");
        } else {
            $("#phoneID").css("border", "2px solid red");
        }
        return flag;
    }

    //校验用户名:单词的长度3~8
    function check_username() {
        //获取用户名
        let value = $("#usernameID").val();
        //定义正则表达式
        let reg_username = /^[\w\u4e00-\u9fa5]{3,8}$/;
        let flag = reg_username.test(value);
        //判断,给出提示
        if (!flag) {
            $("#usernameID").css("border", "2px solid red");//改变边框颜色
        } else {
            $("#usernameID").css("border", "");//改变边框颜色
        }
        return flag;
    }
</script>
</body>
</html>
